<template>
  <div class="userinfo">
    <a-card
      hoverable
      class="infocard"
    >
      <a-card-meta
        :title="user.name"
        :description="user.birth_date?user.birth_date:'不写生日就是永远18'"
      >
        <a-avatar
          slot="avatar"
          :src="user.header_img?user.header_img:'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'"
          size="large"
        />
      </a-card-meta>
      <div class='content'>
        <a-descriptions title="用户信息">
          <a-descriptions-item label="手机号码">
            {{user.phone}}
          </a-descriptions-item>
          <a-descriptions-item label="剩余积分">
            {{user.remain_score}}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="btns">
        <a-button
          type="primary"
          @click="modifyPassword"
        >修改密码</a-button>
        <a-button
          type="primary"
          @click="updating=true"
        >更新信息</a-button>
      </div>
    </a-card>
    <password
      :visible="visible"
      @close="close"
    ></password>
    <a-modal
      :visible="updating"
      :footer="null"
      @cancel="updating=false"
    >
      <updateInfo
        @cancel="updating=false"
        v-if="updating"
      ></updateInfo>
    </a-modal>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { userinfo } from '@/services/user'
import password from '@/pages/components/modifyPassword'
import updateInfo from '@/pages/components/userinfo/editUser'
export default {
  name: 'userinfo',
  components: { password, updateInfo },
  created() {
    localStorage.getItem('user') || this.getUserInfo()
  },
  data() {
    return {
      visible: false,
      updating: false
    }
  },
  methods: {
    async getUserInfo() {
      try {
        const res = await userinfo();
        localStorage.setItem('user', JSON.stringify(res.result))
      } catch (e) {
        this.$message.error(e.msg)
      }
    },
    modifyPassword() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
  },
  computed: {
    ...mapGetters('account', ['user'])
  }
}
</script>

<style lang='scss' scoped>
.userinfo {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  .infocard {
    width: 100%;
    height: 100%;
    .content {
      border-top: 1px dashed gray;
      margin: 10px auto;
      padding: 10px;
    }
    .btns {
      width: 17%;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>